import { computed, defineComponent, h, renderSlot } from "vue";
import componentMap from "./component";

export default defineComponent({
    name: "ProFormItem",
    props: {
        schema: {
            type: Object,
            default: () => {},
        },
        value: {
            default: () => null,
        },
    },
    setup(props, { attrs }) {
        const Component = computed(() => {
            const name = props.schema?.component || "NInput";
            return componentMap.get(name);
        });

        const propsData = computed(() => {
            return props.schema?.props;
        });

        const value = computed(() => {
            return props.value;
        });

        return {
            Component,
            propsData,
            value,
        };
    },
    methods: {
        updateValue(val) {
            this.$emit("update:value", val);
            this.$emit("update:val", val);
        },
    },
    render() {
        const { Component, propsData, value } = this;
        if (Component.name === "DatePicker") {
            return h(Component, {
                "onUpdate:formatted-value": (val) => {
                    this.updateValue(val);
                },
                "formatted-value": value,
                ...propsData,
            });
        }
        return h(Component, {
            "onUpdate:value": (val) => {
                this.updateValue(val);
            },
            value,
            ...propsData,
        });
    },
});
